<template>
	<view class="">
		<view class="orderhead">
			<view class="" v-if="infoOrderStatus==0 && infoOrderPaytype!==3">
				等待付款
			</view>
			<view class="" v-else-if="infoOrderStatus==0">
				等待付款
			</view>
			<view class="" v-else-if="infoOrderStatus==1">
				买家已付款
			</view>
			<view class="" v-else-if="infoOrderStatus==2">
				卖家已发货
			</view>
			<view class="" v-else-if="infoOrderStatus==3">
				交易完成
			</view>
			<view class="" v-else-if="infoOrderStatus==-1">
				交易关闭
			</view>
			<view class="">
				订单金额(含运费): ￥{{infoOrderPrice}}
			</view>
			<view class="">
				<!-- 运费: ￥{{info.order.dispatchprice}} -->
				运费: ￥{{infoOrderOlddispatchprice}}
			</view>
		</view>
		<view class="orderlogistics" v-if="info.address">
			<view class="">
				收件人：{{info.address.realname}}({{info.address.mobile}})
			</view>
			<view class="">
				{{info.address.province}}{{info.address.city}}{{info.address.area}}{{info.address.address}}
			</view>
			<view class="" style="text-align: right;" v-if="infoOrderStatus==1">
				<button type="default" style="background-color: #8405dc;color: #fff;" size="mini"
					v-if="infoOrder.canrefund" @tap="tiao">{{infoOrder.refund_button}}</button>
			</view>
		</view>
		<view class="c_orderinfo">
			<view class="c_orderinfohead">
				{{infoSetName}}
			</view>
			<view class="c_ordershop" v-for="item in info.goods"
				@click="navto('/pages/product/product?id='+item.goodsid)">
				<image :src="item.thumb" mode="" class="c_shopimg"></image>
				<view class="c_ordershoptitle">
					<view class="c_ordershoptitles">
						{{item.title}}
					</view>
					<view class="" style="color: #909399;">
						<text style="padding-right: 30upx;" v-if="item.optiontitle!=''"><text
								style="color: #303133;">规格：</text>{{item.optiontitle}}</text><text
							style="color: #303133;">数量：</text>×{{item.total}}
					</view>
				</view>
				<view class="">
					￥{{item.price}}
				</view>
			</view>
		</view>
		<view class="c_orderinfolist">
			<view class="c_orderinfolists">
				<view class="">
					订单编号:
				</view>
				<view class="">
					<text selectable="true">{{infoOrderOrdersn}}</text><button class="order-copy" size="mini"
						plain="true" @click="copy(infoOrderOrdersn)">复制</button>
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrderStatus>1">
				<view class="">
					物流单号:
				</view>
				<view class="">
					<text selectable="true">{{info.order.expresssn}}</text><button class="order-copy" size="mini"
						plain="true" @click="copy(info.order.expresssn)">复制</button>
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					商品总计:
				</view>
				<view class="">
					￥ {{infoOrder.goodsprice}}
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					运费:
				</view>
				<view class="">
					¥ {{infoOrderOlddispatchprice}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.deductprice>0">
				<view class="c_df">
					<view class="" v-if="info.shopset.credit1">
						{{info.shopset.credit1}}
					</view>
					<view class="" v-else>
						积分
					</view>
					抵扣
				</view>
				<view class="">
					+¥ {{infoOrder.deductprice}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.deductyunbimoney>0">
				<view class="">
					{{info.yunbiset.yunbi_title}}抵扣:
				</view>
				<view class="">
					-¥ {{infoOrder.deductyunbimoney}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.deductredit2>0">
				<view class="c_df">
					<view class="" v-if="info.shopset.credit">
						{{info.shopset.credit}}
					</view>
					<view class="" v-else>
						余额
					</view>
					抵扣
				</view>
				<view class="">
					+¥ {{infoOrder.deductredit2}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.deductenough!=0">
				<view class="">
					满额立减:
				</view>
				<view class="">
					-¥ {{infoOrder.deductenough}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.changeprice!=0">
				<view class="">
					改价优惠:
				</view>
				<view class="">
					+¥ {{infoOrder.changeprice}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.changedispatchprice!=0">
				<view class="">
					运费优惠:
				</view>
				<view class="">
					+¥ {{infoOrder.changedispatchprice}}
				</view>
			</view>

			<view class="c_orderinfolists" v-if="infoOrder.couponprice">
				<view class="">
					优惠券优惠:
				</view>
				<view class="">
					-¥ {{infoOrder.couponprice}}
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					服务费:
				</view>
				<view class="">
					¥ {{infoOrder.servicefee}}
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					米币:
				</view>
				<view class="">
					{{infoOrder.paycredit}}
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					现金:
				</view>
				<view class="">
					¥ {{(infoOrderPrice-infoOrder.paycredit).toFixed(2)}}
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					实付费(含运费):
				</view>
				<view class="" style="color:#ff6600">
					¥ {{infoOrderPrice}}
				</view>
			</view>
			<view class="c_orderinfolists">
				<view class="">
					赠送米币:
				</view>
				<view class="">
					{{infoOrder.credit1}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.createtime!=0">
				<view class="">
					下单时间:
				</view>
				<view class="">
					{{infoOrder.createtime}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.sendtime!=0">
				<view class="">
					发货时间:
				</view>
				<view class="">
					{{infoOrder.sendtime}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.finishtime!=0">
				<view class="">
					完成时间:
				</view>
				<view class="">
					{{infoOrder.finishtime}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.refundtime!=0">
				<view class="">
					退货完成时间:
				</view>
				<view class="">
					{{infoOrder.refundtime}}
				</view>
			</view>
			<view class="c_orderinfolists" v-if="infoOrder.isprize==1">
				赠送奖品（无法退货）
			</view>
		</view>
		<view class="c_orderbtn" v-if="infoOrderStatus==0">
			<button type="default" size="mini" @tap="remove">取消订单</button>
			<button type="default" size="mini" v-if="infoOrderPaytype!=3" @tap="gopay">付款</button>
		</view>
		<view class="c_orderbtn" v-else-if="infoOrderStatus==2">
			<button type="default" size="mini" @tap="goodstap()">确认收货</button>
			<button type="default" size="mini" v-if="infoOrder.expresssn!=''"
				@tap="navto('logistics?expresssn='+infoOrder.expresssn+'&ordersn='+infoOrderOrdersn)">查看物流</button>
		</view>
		<view class="c_orderbtn" v-else-if="infoOrderStatus==3 && infoOrder.iscomment==0">
			<button type="default" style="background-color: #8405dc;color: #fff;" size="mini" v-if="infoOrder.canrefund"
				@tap="tiao">{{infoOrder.refund_button}}</button>
			<button type="default" size="mini" @tap="go('evaluate')">评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				info: {
					address: ''
				},
				infoOrderPaytype: 0,
				infoOrderStatus: 0,
				infoOrderPrice: '0.00',
				infoOrderOlddispatchprice: '0.00',
				infoSetName: '',
				infoOrderOrdersn: '',
				infoOrder: '',
				cancel: false
			}
		},
		onLoad(option) {
			var that = this;
			that.id = option.id
			that.$axios('Detail/main', "POST", 'order', {
				id: that.id
			}).then(res => {
				if (res.data.code == 200) {
					that.info = res.data.data;
					that.infoOrderPaytype = that.info.order.paytype;
					that.infoOrderStatus = that.info.order.status;
					that.infoOrderPrice = that.info.order.price;
					that.infoOrderOlddispatchprice = that.info.order.olddispatchprice;
					that.infoSetName = that.info.set.name;
					that.infoOrderOrdersn = that.info.order.ordersn;
					that.infoOrder = that.info.order;
					if (that.info.order.refundstate != 0) {
						this.cancel = true;
					}
				}
			}, (error) => {

			})
		},
		methods: {
			copy(str) {
				// #ifdef H5
				copyToClip(str, this);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: str
				});
				// #endif
			},
			navto(url) {
				uni.navigateTo({
					url: url
				})
			},
			tiao() {
				var _this = this;
				if (this.info.order.refundtype == 0) {
					uni.navigateTo({
						url: "/pages/order/Customer?id=" + _this.id
					})
				} else {
					uni.navigateTo({
						url: "/pages/order/AfterSales?id=" + _this.id
					})
				}
			},
			goodstap() {
				var that = this;
				that.$axios('op/complete', "POST", 'order', {
					orderid: that.id
				}).then(res => {
					if (res.data.code == 200) {
						uni.navigateTo({
							url: '/pages/order/order?state=3'
						})
					}
				})
			},
			canceltap() {
				var that = this;
				that.$axios('op/submitRefund', "POST", 'order', {
					orderid: that.id,
					cancel: 1
				}).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '取消成功！',
							showCancel: false,
							success() {
								location.reload();
							}
						})
					}
				}, (error) => {

				})
			},
			go(url) {
				uni.navigateTo({
					url: url + "?id=" + this.id
				})
			},
			remove: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认取消订单',
					success: function(res) {
						if (res.confirm) {
							that.$axios('Op/cancel', "POST", 'order', {
								orderid: that.id
							}).then(res => {
								if (res.data.code == 200) {
									uni.navigateBack()
								}
							}, (error) => {

							})
						} else if (res.cancel) {

						}
					}
				});
			},
			gopay: function() {
				uni.navigateTo({
					url: "/pages/money/pay?orderid=" + this.info.order.id
				})
			}
		}
	}
	//复制分享链接到粘贴板
	function copyToClip(content, that) {
		var aux = document.createElement("input");
		aux.setAttribute('readonly', 'readonly')
		aux.setAttribute("value", content);
		document.body.appendChild(aux);
		aux.select();
		aux.setSelectionRange(0, content.length);
		var message = document.execCommand("copy");
		if (message) {
			uni.showToast({
				title: '复制成功'
			});
		} else {
			that.$api.msg('复制失败');
		}
		document.body.removeChild(aux);
	}
</script>

<style lang="scss">
	page {
		background: #eee;
		padding-bottom: 100upx;
	}

	.order-copy {
		font-size: 24upx;
		margin-left: 20upx;
		vertical-align: middle;
		line-height: 40upx;
		float: right;
	}

	.orderhead {
		background: #5f6e8b;
		color: #fff;
		padding: 20upx;
		box-sizing: border-box;
	}

	.orderlogistics {
		background: #fff;
		padding: 20upx;
		box-sizing: border-box;
	}

	.c_orderinfo {
		margin-top: 20upx;
		background: #fff;

		.c_orderinfohead {
			padding: 20upx;
		}

		.c_ordershop {
			display: flex;
			justify-content: space-between;
			padding: 20upx;
			border-top: 1px solid #eaeaea;
			border-bottom: 1px solid #eaeaea;

			.c_shopimg {
				width: 50px;
				height: 50px;
			}

			.c_ordershoptitle {
				width: 480upx;
				font-size: 12px;
				padding: 0 10upx;

				.c_ordershoptitles {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
	}

	.c_orderinfolist {
		background: #fff;
		padding: 20upx;

		.c_orderinfolists {
			display: flex;
			justify-content: space-between;
			padding: 10upx 0;
		}
	}

	.c_orderbtn {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		background: #fff;
		padding: 20upx 20upx;
		width: 100%;

		button {
			margin-left: 10upx;
			margin-right: 0;
		}
	}

	.c_df {
		display: flex;
		align-items: center;
	}
</style>
